文件上传入口：

<input type="file" multiple accept=".jpg, .gif" />

有一些有用的属性

multiple    //支持多个选择

accept      //支持文件选择格式

最有用的属性

files;

每个上传文件的input都有一个files属性，它是一个FileList对象，是个数组，可以取到每个File对象

文件上传后，this.value并不是图片真实路径值，而是：this.value=C:\fakepath\1.jpg

主要是为了安全考虑，读取文件真实地址，需用到FileReader对象

新建一个FileReader对象

var fReader = new FileReader();     

FileReader对象读取File对象的URL

fReader.readAsDataURL(File);

读取完成后的结果

fReader.onload = function() {
    var img = new Image();
    img.src = this.result;
}

重点理解FileReader对象：

构造创建FileReader对象实例

var fReader = new FileReader();

属性

       
error: 读取文件时发生的错误 【只读】

       
result: 读取操作完成后的读取内容 【只读】

方法

       
readAsText(): 以纯文本形式读取内容

       
readAsDataURL(): 以URL形式读取内容

几个事件

       
onbort: 读取中断

       
onerror: 读取发生错误时

       
onload: 读取成功时

       
onloadend: 当读取操作完成后，无论成功或错误